<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交通信号灯</title>
    <style>
        .traffic-light {
            width: 320px;
            height: 120px;
            background-color: black;
            border-radius: 20px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            padding: 20px;
        }
        .light {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            margin: 0 10px;
        }
        .red { background-color: red; }
        .yellow { background-color: yellow; }
        .green { background-color: green; }
        .active { border: 5px solid white; }
    </style>
</head>
<body>
<div class="traffic-light">
    <div class="light red inactive"></div>
    <div class="light yellow inactive"></div>
    <div class="light green inactive"></div>
</div>
<div id="timer"></div>

<script>
    const redLight = document.querySelector('.red');
    const yellowLight = document.querySelector('.yellow');
    const greenLight = document.querySelector('.green');

    const trafficLight = {
        red: redLight,
        yellow: yellowLight,
        green: greenLight,
        currentLight: null,
        changeLight: function(color) {
            if (this.currentLight) {
                this.currentLight.classList.remove('active');
            }
            this.currentLight = this[color];
            this.currentLight.classList.add('active');
        }
    };
    const countdown = {
        totalSeconds: 0,
        timer: null,
        start: function(seconds) {
            this.totalSeconds = seconds;
            this.updateTimerDisplay();

            this.timer = setInterval(() => {
                if (this.totalSeconds <= 0) {
                    clearInterval(this.timer);
                    return;
                }
                this.totalSeconds--;
                this.updateTimerDisplay();
            }, 1000);
        },
        updateTimerDisplay: function() {
            const minutes = Math.floor(this.totalSeconds / 60);
            const seconds = this.totalSeconds % 60;
            document.getElementById('timer').innerText = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
    };
    function init() {
        trafficLight.changeLight('red');
        countdown.start(30);
    }
    init();
    const lightSequence = ['red', 'green', 'yellow'];
    let currentLightIndex = 0;
    function switchLight() {
        const currentLight = lightSequence[currentLightIndex];
        const nextLight = lightSequence[(currentLightIndex + 1) % lightSequence.length];

        trafficLight.changeLight(currentLight);

        if (currentLight === 'red') {
            countdown.start(30);
        } else if (currentLight === 'green') {
            countdown.start(35);
        } else if (currentLight === 'yellow') {
            countdown.start(5);
        }

        currentLightIndex = (currentLightIndex + 1) % lightSequence.length;
    }
    setInterval(switchLight, 40000);
    switchLight();
</script>
</body>
</html>